@import "../../styles/var.scss";

.list {
  position: relative;
  .group {
    &-title {
      line-height: 2;
    }
  }
  .icons {
    display: flex;
    flex-wrap: wrap;
  }
}

.icon-item {
  margin: 2.5rem;
  padding: 1.2rem 0;
  color: #808080;
  font-size: 1.4rem;
  width: 10rem;
  border-radius: 0.4rem;
  box-sizing: border-box;
  border: solid 0.1rem transparent;
  cursor: pointer;
  &.selectable {
    background: #e5ecff;
    user-select: none;
    &.selected {
      border-color: $color-main;
      background: #fff;
      overflow: hidden;
    }
    .name,
    .code {
      padding: 0 0.5rem;
    }
  }
  .icon {
    width: 3.8rem;
    height: 3.8rem;
    margin: 0 auto 2.5rem;
  }
  .name,
  .code {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.1;
  }
  .name {
    margin-bottom: 0.6rem;
  }
}
.type-img {
  .icon-item {
    width: 30rem;
    max-width: calc(24vw - 5rem);
    .icon {
      width: auto;
      max-width: 100%;
      height: 16rem;
    }
  }
}
.style-tidy {
  .group-title {
    margin: 1rem 0;
  }
  .icon-item {
    width: 15rem;
    aspect-ratio: 0.618;
    padding: 0;
    margin: 0;
    .name,
    .code {
      display: none;
    }
    .icon {
      margin: 0 auto;
      height: 100%;
    }
    ::v-deep(.icon-img) {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  &.type-svg {
    .icon-item {
      aspect-ratio: 1;
      .icon {
        width: 6rem;
      }
      ::v-deep(.icon-svg) {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }
    }
  }
}
